<template>
  <card :showDivider="false" class="mb-4 max-w-full" toggle bordered :headerStyle="{ background: '#e8f3ff', padding: '10px 20px' }">
    <template #title v-if="orderInfo">
      <div class="order-expense-card__header">
        <div style="margin-bottom: 7px">
          <span style="margin-right: 20px">{{ orderInfo.carSeriesName }}</span>
          <span class="title" v-if="orderInfo.carLicenseNo || orderInfo.channelCarLicenseNo">
            {{ orderInfo.carLicenseNo || orderInfo.channelCarLicenseNo }}
          </span>
        </div>
        <div>
          <span class="content" @click="gotoDetail"
            >订单号：<span :class="{ blue: usePermission('svms:order:short-order.detail') }" class="cursor-pointer underline"
              >{{ orderInfo.orderCode || orderInfo.channelOrderCode }}（{{ orderInfo.orderStatusName }}）</span
            >
          </span>
          <span class="content">
            租赁周期：
            <!-- 已交车展示实交、预还 -->
            <!-- 已还车展示实交、实还 -->
            <span v-if="[200, 300].includes(orderInfo.orderStatus)">{{ orderInfo.actualStartTime }}</span>
            <span v-else>{{ orderInfo.startTime }}</span>
            至
            <span v-if="orderInfo.orderStatus == 300">{{ orderInfo.actualEndTime }}</span>
            <span v-else>{{ orderInfo.endTime }}</span>
            （{{ orderInfo.rentDays }}）
          </span>
        </div>
      </div>
    </template>
    <div class="grid grid-cols-3 gap-3 order-expense-card__desc" v-if="orderInfo">
      <div v-for="(item, index) in orderDescData" :key="index" class="flex" :class="{ 'col-span-2': item.span == 2 }">
        <div class="label">{{ item.label ? `${item.label}:` : '' }}</div>
        <template v-if="item.slotName">
          <div class="value" v-if="item.slotName == 'totalAmount'">
            <span class="blue">{{ orderInfo?.totalAmount }}</span> 元(已结算总额：<span class="blue">{{ orderInfo.statementAmount }}</span> 元 | 未结算总额：<span class="blue">{{ orderInfo.waitStatementAmount }}</span> 元 | 已对账总额：<span class="blue">{{ orderInfo.billedAmountTotal }}</span> 元 | 未对账总额：<span class="blue">{{ orderInfo.waitBillAmountTotal }}</span> 元)
          </div>
          <div class="value" v-if="item.slotName == 'commissionAmount'">
            <span class="blue">{{ orderInfo?.commissionAmount }}</span> 元
            <a-tooltip :content="`佣金比例: ${orderInfo.commissionRate}%`">
              <icon-question-circle />
            </a-tooltip>
          </div>
          <div class="value" v-if="item.slotName == 'statementTotalAmount'">
            <span class="blue">{{ orderInfo?.statementTotalAmount }}</span> 元
          </div>
          <div class="value" v-if="item.slotName == 'orderRevenueAmount'">
            <span class="blue"> {{ orderInfo?.orderRevenueAmount }} </span> 元
          </div>
        </template>
        <div class="value" v-else>{{ item.value }}</div>
      </div>
    </div>
    <tableButton v-if="orderInfo" class="ml-4" :orderInfo="orderInfo" :buttons="table.orderButtons" />
    <table-index :selectedKeys="selectedRowKeys" @selection-change="handleSelectionChange" :table="table">
      <template #payTypeNameList="{ record }">
        <p v-for="(item, index) in record.payTypeNameList" :key="index">{{ item }}</p>
      </template>

      <template #settlementInfo="{ record }">
        <template v-if="record.settlementUserName">
          <p>{{ record.settlementUserName }}</p>
          <p>{{ record.settlementTime }}</p>
        </template>
        <p v-else>-</p>
      </template>

      <template #billInfo="{ record }">
        <template v-if="record.billUserName">
          <p>{{ record.billUserName }}</p>
          <p>{{ record.billTime }}</p>
        </template>
        <p v-else>-</p>
      </template>

      <template #remark="{ record }">
        <div class="remark-info">
          {{ record.remark || '-' }}
        </div>
        <div class="cursor-pointer blue" v-if="record.remark" @click="showRemarkModal(record.id, 'remark')">查看更多</div>
      </template>

      <template #settlementRemark="{ record }">
        <div class="remark-info">
          {{ record.settlementRemark || '-' }}
        </div>
        <div class="cursor-pointer blue" v-if="record.settlementRemark" @click="showRemarkModal(record.id, 'settlementRemark')">查看更多</div>
      </template>

      <template #billRemark="{ record }">
        <div class="remark-info">
          {{ record.billRemark || '-' }}
        </div>
        <div class="cursor-pointer blue" v-if="record.billRemark" @click="showRemarkModal(record.id, 'billRemark')">查看更多</div>
      </template>
    </table-index>
    <!-- 备注列表弹框 -->
    <remark-log-modal ref="remarkModalRef" />
  </card>
</template>

<script setup>
  import { computed, ref, nextTick } from 'vue'
  import tableButton from './table-button.vue'
  import useNavigate from '@/hooks/useNavigate'
  import remarkLogModal from '../modal/remark-log-modal.vue'
  import { usePermission } from '@/hooks/usePermission'

  const emit = defineEmits(['getCheckList'])

  const orderDescData = computed(() => {
    let arr = [
      {
        label: '承租人',
        value: `${orderInfo.value.memberName} | ${orderInfo.value.memberPhone}`,
      },
      {
        label: '订单总额',
        slotName: 'totalAmount',
        span: 2,
      },
      {
        label: '取车门店',
        value: orderInfo.value.siteName,
      },
      {
        label: '佣金总额',
        slotName: 'commissionAmount',
        span: 2,
      },
      {
        label: '还车门店',
        value: orderInfo.value.returnSiteName,
      },
      {
        label: 'OTA对账总额',
        slotName: 'statementTotalAmount',
      },
      {
        label: '净收入',
        slotName: 'orderRevenueAmount',
      },
    ]
    // 订单来源为线下订单时，不展示佣金总额和OTA对账总额
    if (orderInfo.value.orderSource == 1) {
      arr = arr.filter((it) => it.label !== '佣金总额' && it.label !== 'OTA对账总额')
    }
    return arr
  })
  // 定义 props
  const props = defineProps({
    table: {
      type: Object,
      default: () => {},
    },
    isCheckAll: Boolean,
  })
  // 获取订单详情
  const orderInfo = computed(() => {
    return props.table.orderInfo
  })

  // 备注查看更多
  const remarkModalRef = ref()
  const showRemarkModal = (id, type) => {
    remarkModalRef.value.show(id, type)
  }

  const { navigateTo } = useNavigate()
  const gotoDetail = () => {
    if (!usePermission('svms:order:short-order.detail')) return
    let { id, orderCode, orderStatus } = orderInfo.value
    navigateTo(`/short-order/detail/${id}?tab=2&refCode=${orderCode}&orderStatus=${orderStatus}`, `${orderCode}-短租详情`)
  }
  // 全选
  const selectedRowKeys = ref([])
  const handleSelectionChange = (e) => {
    selectedRowKeys.value = e
    // 自动更新选中数据
    emit('getCheckList', { key: props.table.orderInfo.id, value: selectedRowKeys.value })
  }
  const updateCheckStatus = (value) => {
    if (props.table.orderInfo) {
      let notDisabled = props.table.dataList.filter((it) => !it.disabled)
      selectedRowKeys.value = value ? notDisabled.map((it) => it.id) : []
      emit('getCheckList', { key: props.table.orderInfo.id, value: selectedRowKeys.value })
    }
  }
  const updateCheckedFn = (value) => {
    nextTick(()=> {
      selectedRowKeys.value = value
    })
  }
  defineExpose({
    updateCheckStatus,
    updateCheckedFn,
  })
</script>
<style lang="less" scoped>
  .order-expense-card__header {
    .title {
      border-radius: 2px;
      background: #165DFF;
      padding: 1px 4px;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
    }
    .content {
      font-weight: 400;
      font-size: 14px;
      color: #4e5969;
      margin-right: 56px;
    }
    .content:last-child {
      margin-right: 0;
    }
  }
  .order-expense-card__desc {
    padding: 20px;
    .label {
      font-weight: 400;
      font-size: 14px;
      color: #4e5969;
      margin-right: 10px;
    }
    .value {
      font-weight: 400;
      font-size: 14px;
      color: #1d2129;
      flex: 1;
    }
  }
  .blue {
    color: #1890ff;
  }
</style>
